<!--
 * @Author: 刘翔
 * @Date: 2025-07-28 10:08:21
 * @LastEditTime: 2025-09-03 10:56:50
 * @LastEditors: your name
 * @Description:页面组合1(医院整体运营指标)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType1.vue
-->
<template>
  <div class="page-type-1">
    <!-- 表格 -->
    <ComplexTable class="table-container" ref="complexTable" :api-data="data" v-bind="getTableProps()" />
    <!-- 柱状图 -->
    <div class="chart-bar-list">
      <BarChart v-if="getChartProps1()" ref="chart1" v-bind="getChartProps1()" />
      <BarChart v-if="getChartProps2()" ref="chart2" v-bind="getChartProps2()" />
      <BarChart v-if="getChartProps3()" ref="chart3" v-bind="getChartProps3()" />
    </div>
  </div>
</template>

<script>
import ComplexTable from '../components/ComplexTable.vue';
import BarChart from '../components/BarChart.vue';
export default {
  name: 'pageType1',
  components: {
    ComplexTable,
    BarChart,
  },
  props: {
    // 数据
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    // 从数据中获取指定指标的数据
    getIndicatorData(indicatorName) {
      const item = this.data.find(item => item.指标 === indicatorName);
      if (!item) return null;

      // 获取所有年份并排序
      const years = Object.keys(item)
        .filter(key => /^\d{4}$/.test(key))
        .sort();

      return {
        values: years.map(year => item[year]),
        years: years,
      };
    },

    // 根据数值获取颜色
    getColorByValue(value) {
      return value >= 0 ? '#4874cb' : '#ee6666';
    },

    getTableProps() {
      let colW = [];

      if (this.data[0]) {
        let keyLength = Object.keys(this.data[0]).length;
        if (keyLength === 9) {
          colW = [0.4, 1.5, 0.65, 0.65, 0.65, 0.65, 0.65];
        } else if (keyLength === 3) {
          colW = [0.4, 1.6, 3];
        } else if (keyLength === 6) {
          colW = [0.4, 1.6, 1, 1, 1];
        }
      }
      return {
        pptConfig: {
          /** 页面尺寸(英寸) */
          pageSize: { width: 10, height: 5.62 },
          /** 表格配置 */
          table: {
            x: 0.3,
            y: 0.8,
            colW,
            fill: { color: 'F9F9F9' }, // 填充颜色
            color: '000000', // 文字颜色
            fontSize: 9, // 字体大小
            border: { pt: 0.5, color: '000000' }, // 边框样式
            align: 'center', // 水平对齐
            valign: 'middle', // 垂直对齐
            margin: 2, // 边距
            autoPage: false, // 自动分页
          },
          /** 标题配置 */
          title: {
            x: 0.5, // 标题X坐标
            y: 0, // 标题Y坐标
            w: 9.0, // 标题宽度
            h: 0.4, // 标题高度
            fontSize: 14, // 字体大小
            bold: true, // 是否加粗
            color: '363636', // 文字颜色
            align: 'center', // 对齐方式
          },
          /** 表头样式 */
          header: {
            fill: { color: '#4874cb' }, // 填充颜色
            color: 'FFFFFF', // 文字颜色
            colspan: 1, // 跨列数
          },
          /** 分类列样式 */
          category: {
            fill: { color: '#4874cb' }, // 填充颜色
            color: 'FFFFFF', // 文字颜色
          },
          /** 错误提示样式 */
          error: {
            x: 0.5, // X坐标
            y: 2, // Y坐标
            w: 9, // 宽度
            h: 0.5, // 高度
            fontSize: 12, // 字体大小
            color: 'FF0000', // 文字颜色
            align: 'center', // 对齐方式
          },
        },
      };
    },

    getChartProps1() {
      const indicatorData = this.getIndicatorData('入组总病例数（例）');
      if (!indicatorData) return null;
      return {
        title: '入组总病例数(例)',
        categories: indicatorData.years.map(year => `${year}年`),
        values: indicatorData.values,
        // seriesName: '入组总病例数',
        color: '#4874cb',
        smooth: true,
        chartConfig: {
          height: 280,
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}例',
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: '{c}例',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 5.7,
            y: 1,
            w: 4,
            h: 1.2,
          },
          // 标题配置
          title: {
            x: 7,
            y: 0.75,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...indicatorData.values.map(item => Math.abs(item))) * 1.8),
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            dataLabelFormatCode: `#,##例`,
          },
        },
      };
    },

    getChartProps2() {
      const indicatorData = this.getIndicatorData('总结余金额（万元）');
      if (!indicatorData) return null;
      return {
        title: '总结余金额(万元)',
        categories: indicatorData.years.map(year => `${year}年`),
        values: indicatorData.values,
        // seriesName: '总结余金额',
        color: '#4874cb',
        smooth: true,
        chartConfig: {
          height: 280,
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}万元',
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: '{c}万',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 5.7,
            y: 2.6,
            w: 4,
            h: 1.2,
          },
          // 标题配置
          title: {
            x: 7,
            y: 2.35,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //显示值
            showValue: true,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...indicatorData.values.map(item => Math.abs(item))) * 1.8),
            dataLabelPosition: 'outEnd',
            dataLabelFormatCode: `[${indicatorData.values.every(item => item < 0) ? '红色' : '黑色'}],##0.00万`,
          },
        },
      };
    },

    getChartProps3() {
      const indicatorData = this.getIndicatorData('次均结余金额（元）');
      if (!indicatorData) return null;
      return {
        title: '次均结余金额(元)',
        categories: indicatorData.years.map(year => `${year}年`),
        values: indicatorData.values,
        // seriesName: '次均结余金额',
        color: '#4874cb',
        smooth: true,
        chartConfig: {
          height: 280,
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}元',
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: '{c}元',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 5.7,
            y: 4.25,
            w: 4,
            h: 1.2,
          },
          // 标题配置
          title: {
            x: 7,
            y: 4,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //显示值
            showValue: true,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...indicatorData.values.map(item => Math.abs(item))) * 1.8),
            dataLabelPosition: 'outEnd',
            dataLabelFormatCode: `[${indicatorData.values.every(item => item < 0) ? '红色' : '黑色'}],##0.00元`,
          },
        },
      };
    },

    /**
     * 导出为PPT
     * @description 将页面中的所有图表导出到PPT
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      this.$refs.complexTable.exportToPPT(pptx, slide);
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.chart2.exportToPPT(pptx, slide);
      this.$refs.chart3.exportToPPT(pptx, slide);
      //边框
      slide.addText('', {
        x: 5.5,
        y: 0.5,
        w: 4.3,
        h: 5,
        line: { color: '4874cb', width: '1' },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page-type-1 {
  display: flex;
  width: 100%;
  height: 100%;
  .table-container {
    margin-right: 20px;
    width: 48%;
    height: 100%;
  }
  .chart-bar-list {
    width: 50%;
    height: 100%;
    border: 2px solid #4874cb;
  }
}
</style>
